body{
    width: 100%;
    height: 100%;
    position: relative;
}
main{
    width: 100%;
    height: 100%;
}
// 蓝色数字展览盒子
.Blue-number{
    width: 100%;
    min-height: 182px;
    background: #4294FF ;
    // 返回
    .return{
        width: 100%;
        height: 50px;
        text-indent: 10px;
        line-height: 50px;
    }
    // 我的徽章box
    .motion-text-box{
        width: 100%;
        height: 100px;
        // 我的徽章
        .motion-text{
            text-indent: 10px;

            .testlog{
                margin-top: 5px;
                color: rgba(170, 217, 247, 100)
            }
        }
        // 今日排名
        .ranking{
            position: relative;
            width: 160px;
            height: 100px;

            // 今日排名txt
            .ranking-text{
                position: absolute;
                top: 0;
                left: -22px;
                width: 100px;
                height: 20px;
            }
            // 数字
            .ranking-number{
                position: relative;
                left: 20px;
                width: 70px;
                height: 120px;
                font-size: 80px;
                line-height: 70px;
            }
            // 字体图标
            i{
                text-indent: -28PX;
                width: 70px;
                height: 120px;
                line-height: 120px;
                font-size: 130px;
                color: #fff;
            }
        }
    }
    // 下边左右结构具体数据
    

}
// 白色图形展览图
.White-graphics{
    min-height: 600px;
    width: 100%;


    // 最近7天运动时长
    .motion-duration{
        margin: 20px auto;
        min-height: 247px;
        width: 100%;
        background: #fff;
        // box-shadow: 1px 1px 8px 2px #ccc;
        // border-radius: 15px;

        .badge-option{
            // margin-left: 6px;
            width: 120px;
            height: 147px;


            .badge-img{
                height: 100px;
                width: 100px;
            }
            .badge-title{
                height: 40px;
                width: 100px;
            }
            .badge-img1{
                // background: url('../../assets/imgs/mybadge01.jpg') no-repeat;
                background-size: cover;
                
            }
            .badge-img2{
                // background: url('../../assets/imgs/getbadge02.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img3{
                // background: url('../../assets/imgs/mybadge03.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img4{
                // background: url('../../assets/imgs/mybadge04.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img5{
                // background: url('../../assets/imgs/mybadge05.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img6{
                // background: url('../../assets/imgs/mybadge06.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img7{
                // background: url('../../assets/imgs/mybadge07.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img8{
                // background: url('../../assets/imgs/mybadge08.jpg') no-repeat;
                background-size: cover;
            }
            .badge-img9{
                // background: url('../../assets/imgs/mybadge09.jpg') no-repeat;
                background-size: cover;
            }

        }
    }
   
}

.meng{
    overflow: hidden; 
    width: 100%;
    height: 0;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;


    .hader{
        width: 100%;
        height: 50px;
        background: #4294FF;
        font-size: 30px;
        line-height: 50px;
        color: #fff;
        text-indent: 20px;
    }
    .contentimg{
        .imgbox{
            margin-top: 80px;
            width: 250px;
            height: 300px;
            color: #000;
    
            .img{
                width: 250px;
                height: 250px;
                font-size: 0;
                background: rgb(167, 255, 66);
                img{
                    width: 250px;
                    height: 250px;
                }
            }
            .title{
                margin-top: 20px;
                font-weight: bold;
            }
            .text{
                margin-top: 10px;
                color: #4294FF;
            }
           
        }
        .badgeTime{
            text-align: center;
            margin-top: 40%;
            color: #4294FF;
        }
    }
   
}
.showmeng{
    height: 100%;
}